<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<style media="screen">
    .el-table__empty-block{
        height:!important auto;
    }
</style>
{include file="system@block/layui" /}

<div id="box" style="width:90%;margin:0 auto">
    <h1 style="text-align:center"><span>澜悦顾问单</span></h1>
<el-form ref="form" :model="form" :inline="true">
	<span style="font-size: 22px;margin-left: 50px">订单编号：{{sn}}</span>
	<span style="font-size: 22px;margin-left: 50px">会员：{{user}}</span>
	<span style="font-size: 22px;margin-left: 50px">房间：{{room}}</span>
	<span style="font-size: 16px;margin-left: 50px;">日期：{{date}}</span>
    <br>
    <el-form-item label="皮肤现状">
        {{form.skin_text}}
   </el-form-item>
   <br>
    <el-form-item label="需要解决的问题">
        {{form.problem}}

   </el-form-item>
   <br>
    <el-form-item label="操作注意细节">
        {{form.operate_detail}}

   </el-form-item>
   <br>
    <el-form-item label="建议居家用品">
        {{form.sug_goods}}

   </el-form-item>

<div>
<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="项目名称"
      width="100">
      <template slot-scope="scope">
            {{scope.row.project_name}}
      </template>
    </el-table-column>

    <el-table-column
      label="数量">
      <template slot-scope="scope">
       {{ scope.row.num }}
      </template>
    </el-table-column>

    <el-table-column
      label="金额">
      <template slot-scope="scope">
        {{scope.row.price}}
      </template>
    </el-table-column>

      <el-table-column label="顾问">
  <template slot-scope="scope">
      {{scope.row.adviser_id}}
     <!-- <el-select v-model="scope.row.adviser_id" placeholder="请选择顾问"  :disabled="true">
      <el-option v-for="item,idx in advisers" :key="idx" :label="item.nick" :value="item.id"></el-option>
    </el-select> -->

    </template>
  </el-table-column>
   <el-table-column label="美容师">
  <template slot-scope="scope">
      {{scope.row.technician_ids}}
      <!-- <el-select v-model="scope.row.technician_ids" multiple placeholder="请选择美容师" :disabled="true">
    <el-option
    v-for="item in technicians"
    :key="item.id"
    :label="item.nick"
    :value="item.id">
    </el-option>
  </el-select> -->
    </template>
  </el-table-column>
     <el-table-column
      label="手工">
      <template slot-scope="scope">
       {{scope.row.shougong}}
      </template>
    </el-table-column>
    <el-table-column
      label="备注">
      <template slot-scope="scope">
       {{scope.row.bak}}
      </template>
    </el-table-column>
   <el-table-column label="结算方式" width="150">
	  <template slot-scope="scope">
          {{scope.row.settlement}}
	      <!-- <el-select v-model="scope.row.settlement"  placeholder="请选择结算方式" :disabled="true">
		    <el-option v-for="item,idx in settlements" :label="item.name"   :value="item.value"> </el-option>
		  </el-select> -->
	    </template>
  </el-table-column>
  </el-table>
<!-- <span style="color:red">* 注：项目如果赠送，结算方式请选择赠送！</span> -->
</div>

   <el-form-item label="项目金额" >
	<!-- <el-input type="text" v-model="form.service_price"> </el-input> -->
  {{form.service_price}} 元
	</el-form-item>

<div v-if="productData.length > 0">

<el-table
    :data="productData"
    border
    style="width: 100%" >

    <el-table-column
      label="产品名称"
      >
      <template slot-scope="scope">
      		<!-- <el-select v-model="scope.row.product_id" filterable  @change="proSelect(scope.$index)" placeholder="请选择产品">
			      <el-option v-for="item,idx in products" :label="item.name" :value="item.id" :key="idx"></el-option>
		    </el-select> -->
        {{scope.row.name}}
	  </template>
    </el-table-column>

    <el-table-column
      label="数量">
      <template slot-scope="scope">
	   <!-- <el-input v-model="scope.row.num"></el-input> -->
	   <!-- <el-input-number v-model="scope.row.num" size="small" :min="1" @change="setProduct_price2(scope.row, $event)"></el-input-number> -->
    {{scope.row.num}}
	  </template>
    </el-table-column>


    <el-table-column
      label="金额">
      <template slot-scope="scope">
	   <!-- <el-input v-model="scope.row.price2"></el-input> -->
     {{scope.row.price2}}
	  </template>
    </el-table-column>

     <el-table-column label="顾问" >
  <template slot-scope="scope">
      {{scope.row.adviser_id}}
     <!-- <el-select v-model="scope.row.adviser_id" placeholder="请选择顾问" :disabled="true">
      <el-option v-for="item,idx in advisers" :key="idx" :label="item.nick" :value="item.id"></el-option>
    </el-select> -->
    </template>
  </el-table-column>

   <el-table-column label="美容师" >
  <template slot-scope="scope">
      {{scope.row.technician_ids}}
      <!-- <el-select v-model="scope.row.technician_ids" multiple placeholder="请选择美容师" :disabled="true">
    <el-option
    v-for="item in technicians"
    :key="item.id"
    :label="item.nick"
    :value="item.id">
    </el-option>
  </el-select> -->
    </template>
  </el-table-column>

<el-table-column label="结算方式" >
	  <template slot-scope="scope">
          {{scope.row.settlement}}
	      <!-- <el-select v-model="scope.row.settlement"  placeholder="请选择结算方式" :disabled="true">
		    <el-option v-for="item,idx in settlements" :label="item.name"   :value="item.value">
		    </el-option>
		  </el-select> -->
	    </template>
  </el-table-column>

<el-table-column label="是否寄存" >
	  <template slot-scope="scope">
          <span v-if="scope.row.is_deposit == 1">带走</span>
          <span v-if="scope.row.is_deposit == 2">寄存</span>
	      <!-- <el-select v-model="scope.row.is_deposit"  placeholder="请选择结算方式" :disabled="true">
		    <el-option label="带走" :value="1"></el-option>
		    <el-option label="寄存" :value="2"></el-option>
		  </el-select> -->
	    </template>
  </el-table-column>
  <el-table-column label="仓库" >
	  <template slot-scope="scope">
          <span v-for="item,idx in warehouses"  :value="item.id" v-if="scope.row.warehouse_id == item.id">{{item.name}}</span>
		  <!-- <el-select v-model="scope.row.warehouse_id"  placeholder="请选择结算方式" :disabled="true">
		  <el-option v-for="item,idx in warehouses" :label="item.name"   :value="item.id" :key="item.id">
		  </el-option>
		</el-select> -->
	  </template>
	  </el-table-column>
    <el-table-column
      label="备注" >
      <template slot-scope="scope" >
	   <!-- <el-input v-model="scope.row.bak"></el-input> -->
     {{scope.row.bak}}
	  </template>
    </el-table-column>

  </el-table>
  <el-form-item label="产品金额" >
  {{form.product_price}}
	</el-form-item>
</div>
<div >
 <el-divider content-position="left">充值会员卡</el-divider>

 <el-form-item label="充值金额" >
     {{form.recharge.price}}
  <!-- <el-input type="text" v-model="form.recharge.price"> </el-input> -->
</el-form-item>

 <el-form-item label="赠送金额" >
     {{form.recharge.price2}}
  <!-- <el-input type="text" v-model="form.recharge.price2"> </el-input> -->
</el-form-item>
<!-- <span style="color:red">* 注：此项不计入总额，如果客户充值了，需在此备注！</span> -->
</div>
<div class="" v-if="cardData.length > 0">

    <el-divider content-position="left">充值疗程卡</el-divider>
    <!-- <el-button type="success" @click="addCard">新增疗程卡</el-button> -->
    <!-- <span style="color:red">* 注：此项不计入总额，如果客户充值了，需在此备注！</span> -->
    <el-table
        :data="cardData"
        border
        style="width: 100%">
        <el-table-column
          label="疗程卡名称">
          <template slot-scope="scope">
              {{scope.row.name}}
              <!-- <el-select v-model="scope.row.id" filterable  @change="cardSelect(scope.$index)" placeholder="请选择疗程卡">
                <el-option v-for="item,idx in cardList" :label="item.name" :value="item.id" :key="idx"></el-option>
            </el-select> -->
        </template>
        </el-table-column>

        <el-table-column
          label="金额">
          <template slot-scope="scope">
              {{scope.row.price}}
         <!-- <el-input v-model="scope.row.price"></el-input> -->
        </template>
        </el-table-column>

         <el-table-column label="顾问">
      <template slot-scope="scope">
          {{scope.row.adviser_id}}
         <!-- <el-select v-model="scope.row.adviser_id" placeholder="请选择顾问">
          <el-option v-for="item,idx in advisers" :key="idx" :label="item.nick" :value="item.id"></el-option>
        </el-select> -->
        </template>
      </el-table-column>

       <el-table-column label="美容师">
      <template slot-scope="scope">
          {{scope.row.technician_ids}}
          <!-- <el-select v-model="scope.row.technician_ids" multiple placeholder="请选择美容师">
        <el-option
        v-for="item in technicians"
        :key="item.id"
        :label="item.nick"
        :value="item.id">
        </el-option>
      </el-select> -->
        </template>
      </el-table-column>

    <el-table-column label="结算方式" >
        <template slot-scope="scope">
            {{scope.row.settlement}}
            <!-- <el-select v-model="scope.row.settlement"  placeholder="请选择结算方式">
            <el-option v-for="item,idx in settlements" :label="item.name"   :value="item.value">
            </el-option>
          </el-select> -->
          </template>
      </el-table-column>

        <el-table-column
          label="备注">
          <template slot-scope="scope">
              {{scope.row.bak}}
         <!-- <el-input v-model="scope.row.bak"></el-input> -->
        </template>
        </el-table-column>



      </el-table>

    </div>
    <br>
<div>

<el-form-item label="总金额" >
	<!-- <el-input type="text" v-model="form.zong_price"> </el-input> -->
  {{form.zong_price}}
</el-form-item>
<el-form-item label="收款账户" >
	<!-- <el-input type="text" v-model="form.account_id"> </el-input> -->
	<el-select v-model="form.account_id" placeholder="请选择收款账户" :disabled="true">
      <el-option v-for="item,idx in accounts" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>

</el-form-item>

<el-form-item label="顾客签字" >
	<!-- <el-input type="text" v-model="form.account_id"> </el-input> -->
	<!-- <el-select v-model="form.account_id" placeholder="请选择收款账户" :disabled="true">
      <el-option v-for="item,idx in accounts" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select> -->

</el-form-item>


</div>
</el-form>
</div>

<script>
var vm = new Vue({
	el:'#box',
	data:{
		settlements:[{
			name:'现金',
			value:1
		},{
			name:'会员卡',
			value:2
		},{
			name:'赠送',
			value:3
		},{
			name:'疗程卡',
			value:4
		},{
      name:'会员卡赠送',
      value: 10000
    }],
		sn:"{$formData.sn}",
		user:'',
		user_id:{$formData.user_id},
		room:'',
		room_id:{$formData.room_id},

		form:{
			service_price:0,
			product_price:0,
			zong_price:0,
			id:{$formData.id},
            account_id:{$formData.account_id},
            cashier_id:{$formData.cashier_id},
            finance_id:'',
            recharge:{:json_encode($recharge,true)},
            card_price:0,
            skin_text:'{$formData['skin_text']}',
            problem:'{$formData['problem']}',
            operate_detail:'{$formData['operate_detail']}',
            sug_goods:'{$formData['sug_goods']}',
		},
		users:{:json_encode($users)},
		rooms:{:json_encode($rooms)},
		tableData:[],
		project_data:{:json_encode($project_data,true)},
    	advisers:{:json_encode($advisers)},
		finances:{:json_encode($finances)},
	    technicians:{:json_encode($technicians)},
	    products:{:json_encode($products)},
	    accounts:{:json_encode($accounts)},
	    cashiers:{:json_encode($cashiers)},
		warehouses:{:json_encode($warehouses)},
	    buy_product:{:json_encode($buy_product,true)},
	    productData:[],
	    defaultProduct:[],
        cardData:[],
        cardList:[],
        cardDefault:[],
        date:'',
	},
	created(){
        var day2 = new Date();
        day2.setTime(day2.getTime());
        this.date = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();

		console.log(this.buy_product);

		this.defaultProduct = this.products[0]
		for(var i = 0; i < this.users.length;i++){
			if(this.user_id === this.users[i].id){
				this.user = this.users[i].nick;
			}
		}
		for(var i = 0; i < this.rooms.length;i++){
			if(this.room_id === this.rooms[i].id){
				this.room = this.rooms[i].name;
			}
		}
		for(var i = 0; i< this.project_data.length;i++){
            for (var j = 0; j < this.advisers.length; j++) {
                if(this.advisers[j]['id'] == Number(this.project_data[i].adviser_id)){
                    var adv = this.advisers[j]['nick'];
                }
            }
            var tec = '';
            for (var j = 0; j < this.technicians.length; j++) {
                if(this.project_data[i].technician_ids.map(x => Number(x)).includes(this.technicians[j]['id'])){
                    tec += this.technicians[j]['nick'] + '、';
                }
            }
            for (var j = 0; j < this.settlements.length; j++) {
                if(this.settlements[j]['value'] == Number(this.project_data[i].settlement)){
                    var settlement = this.settlements[j]['name'];
                }
            }
            this.tableData.push({
                project_id:Number(this.project_data[i].project_id),
                project_name:this.project_data[i].project_name,
                price: this.project_data[i].price,
                num: this.project_data[i].num,
                is_give: Number(this.project_data[i].is_give),
                settlement: settlement,
                type: this.project_data[i].type,
                shougong: this.project_data[i].shougong,
                bak: this.project_data[i].bak,
                adviser_id: adv,
                technician_ids: tec,
            })
        }
        for(var i = 0; i< this.buy_product.length;i++){
            for (var j = 0; j < this.advisers.length; j++) {
                if(this.advisers[j]['id'] == Number(this.buy_product[i].adviser_id)){
                    var adv = this.advisers[j]['nick'];
                }
            }
            var tec1 = '';
            for (var j = 0; j < this.technicians.length; j++) {
                if(this.buy_product[i].technician_ids.map(x => Number(x)).includes(this.technicians[j]['id'])){
                    tec1 += this.technicians[j]['nick'] + '、';
                }
            }
            for (var j = 0; j < this.settlements.length; j++) {
                if(this.settlements[j]['value'] == Number(this.buy_product[i].settlement)){
                    var settlement = this.settlements[j]['name'];
                }
            }
            this.productData.push({
                "product_id" : this.buy_product[i].product_id,
                "name" : this.buy_product[i].name,
                "price2" : Number(this.buy_product[i].price2),
                "num" : Number(this.buy_product[i].num),
                "is_deposit" : Number(this.buy_product[i].is_deposit),
                "adviser_id" : adv,
                "technician_ids" :tec1,
                "settlement" : settlement,
                "warehouse_id" : Number(this.buy_product[i].warehouse_id),
                "bak" : this.buy_product[i].bak,
            });
        }
        var cardList = [];
        cardList = {:json_decode(json_encode($formData.card_data),true)};
        console.log(cardList)
        for (var i = 0; i < cardList.length; i++) {
            for (var j = 0; j < this.advisers.length; j++) {
                if(this.advisers[j]['id'] == Number(cardList[i].adviser_id)){
                    var adv = this.advisers[j]['nick'];
                }
            }
            var tec2 = '';
            for (var j = 0; j < this.technicians.length; j++) {
                if(cardList[i].technician_ids.map(x => Number(x)).includes(this.technicians[j]['id'])){
                    tec2 += this.technicians[j]['nick'] + '、';
                }
            }
            for (var j = 0; j < this.settlements.length; j++) {
                if(this.settlements[j]['value'] == Number(cardList[i].settlement)){
                    var settlement = this.settlements[j]['name'];
                }
            }
            this.cardData.push({
                "id" : cardList[i].id,
                "name" : cardList[i].name,
                "price" : Number(cardList[i].price),
                "adviser_id" : adv,
                "technician_ids" :tec2,
                "settlement" : settlement,
                "bak" : cardList[i].bak,
            });
        }
        // this.cardData = cardList;
        // this.cardDefault = cardList[0];
	},

	methods:{
		onSubmit:function(status){
			// console.log(this.form)
			// console.log(this.tableData)
			// console.log(this.productData)
			var params = {
        id:this.form.id,
        status:status,
        finance_id:this.form.finance_id
      };
			var that = this;

			axios.post('{:url('')}', params).then(function (response) {
                if(response.data.status === true){
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    that.$message({
                        type: 'success',
                        message: response.data.message,
                        onClose: function(){
                            parent.layer.close(index); //再执行关闭
                            window.parent.location.reload();
                        }
                    })
                }else{
                    that.$message({
                        type: 'error',
                        message: response.data.message
                    })
                }
            }).catch(function (error) {
                that.$message({
                        type: 'error',
                        message: error
                    })
            });
		},
		addPro:function(){
			this.productData.push({
				product_id:Number(this.defaultProduct.id),
				name:this.defaultProduct.name,
				price2: this.defaultProduct.price2,
				num:1,
				is_deposit:1,
			});
		},
		removeItem:function(idx){
			this.productData.splice(idx,1);
		},
		setProduct_price(item, num) {
            item.price = (((item.price||0)  / (item.old_number||1)) * num).toFixed(2)
            item.old_number = num
        },
        setProduct_price2(item, num) {
        	// console.log(num)
            item.price2 = (((item.price2||0)  / (item.old_number2||1)) * num).toFixed(2)
            item.old_number2 = num
        },
        proSelect:function(idx){
			var that = this;
		    let row = that.products.filter(function(p){
			     return p.id === that.productData[idx].product_id;
			 })[0]
	        Object.keys(row).map(key => {

	          if (key !== 'product_id') {
	            that.$set(that.productData[idx], key, row[key])
	          }
	        })

		},
	},

	watch:{
		form:{
			handler:function(){
				// this.form.zong_price = this.form.service_price + this.form.product_price;
                this.form.zong_price = this.form.service_price + this.form.product_price + Number(this.form.recharge.price) + this.form.card_price;
			},
			deep:true
		},
		tableData:{
			handler:function(){
	            var sum = 0
		          this.tableData.map(i => {
		            sum +=  Number(i.price)
		          })
		          this.form.service_price =  Number.isNaN(sum) ? 0 : sum
	        },
	        deep:true//对象内部的属性监听，也叫深度监听
		},
		productData:{
			handler:function(){
	            var sum = 0
		          this.productData.map(i => {
		            sum +=  Number(i.price2)
		          })
		          this.form.product_price =  Number.isNaN(sum) ? 0 : sum
	        },
	        deep:true//对象内部的属性监听，也叫深度监听
		},
        cardData:{
          handler:function(){
                  var sum = 0
                  this.cardData.map(i => {
                    sum +=  Number(i.price)
                  })
                  this.form.card_price =  Number.isNaN(sum) ? 0 : sum
              },
              deep:true//对象内部的属性监听，也叫深度监听
        }
	},
})

</script>
